<template>
	<div class="wrapper">
		<div 
			class="icon"
			v-for="item of iconList"
			:key="item.id"
		>
			<div >
				<img 
					class="img" 
					:src="item.imgUrl" 
					:class="[item.color]"
					>
			</div>
			<div class="icon-desc" >
				{{item.desc}}
			</div>
		</div>	
		
	</div>
</template>

<script>
	export default{
		name:'homeCatalog',
		props:{
			iconList:Array
		},
		data(){
			return {
				red:'red',
				green:'green',
				blue:'blue',
				cyan:'cyan',
				// iconlist:[
				// 	{
				// 		id:"0001",
				// 		imgUrl:'../../../../static/jpg001.jpg',
				// 		desc:'本地热推',
				// 		color:'red'
				// 	},
				// 	{
				// 		id:"0002",
				// 		imgUrl:'../../../../static/jpg001.jpg',
				// 		desc:'亲子游',
				// 		color:'green'
				// 	},
				// 	{
				// 		id:"0003",
				// 		imgUrl:'../../../../static/jpg001.jpg',
				// 		desc:'温泉热卖',
				// 		color:'blue'
				// 	},
				// 	{
				// 		id:"0004",
				// 		imgUrl:'../../../../static/jpg001.jpg',
				// 		desc:'主题乐园',
				// 		color:'cyan'
				// 	}
				// ]
			// }(){
				
			}
		}
	}
</script>

<style lang="stylus" scoped="scoped">
.wrapper

	padding-top:.2rem
	.icon
		width:25%
		float:left
		.img
			display:block
			border-radius:100rem
			background:red
			margin:0 auto
		.red
			background:'red'
		.green
			background:'green'
		.blue
			background:'blue'
		.cyan
			background:'cyan'
		.icon-desc
			text-align:center
			padding-top:.2rem	
</style>
